<template>
    <div class="swiper-demo">
        <div class="swiper-main-box">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in swiperList" :key="item.id">
                        <img :src="item.imgUrl" alt="" v-if="swiperList.length > 0">
                    </div>
                </div>
                <!-- 分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <!-- 滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>
        </div>
        <!-- 开通vip -->
            <div class="vip-box">
                <img src="" alt="">
                <span>仅需198即可观看所有付费课程</span>
                <button>开通VIP </button>
            </div>

            <!-- 直播课程 -->
             <div class="live-box">
                <div class="live-left">
                    <div class="live-head">
                        <img src="" alt="">
                        <span>直播课程</span>
                        <span class="live-head-span-min">互联网大佬在线直播</span>
                    </div>
                    <div class="live-content">
                        <div>
                            <img src="https://oos-hazz.ctyunapi.cn/online-course/1-1352930580794179584.png" alt="">
                            <div class="liveName">求职技巧之重难点问题刨析与解决</div>
                            <div class="liveTime"><img src="" alt=""><span>直播结束</span></div>
                        </div>    
                        <div>
                            <img src="https://oos-hazz.ctyunapi.cn/online-course/%E7%9B%B4%E6%92%AD%E5%B0%81%E9%9D%A2-1254953535796150272.png" alt="">
                            <div class="liveName">求职技巧之重难点问题刨析与解决</div>
                            <div class="liveTime"><img src="" alt=""><span>直播结束</span></div>
                        </div>
                        <div>
                            <img src="https://oos-hazz.ctyunapi.cn/online-course/123-1252130152859566080.png" alt="">
                            <div class="liveName">求职技巧之重难点问题刨析与解决</div>
                            <div class="liveTime"><img src="" alt=""><span>直播结束</span></div>
                        </div>
                        <div>
                            <img src="https://oos-hazz.ctyunapi.cn/online-course/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95%20%E5%9F%BA%E7%A1%80%E7%AF%87%20%E6%8B%B7%E8%B4%9D-1252123020651134976.jpg" alt="" >
                            <div class="liveName">求职技巧之重难点问题刨析与解决</div>
                            <div class="liveTime"><img src="" alt=""><span>直播结束</span></div>
                        </div>
                    </div>
                    
                </div>
                <div class="list-right">
                    <div class="live-head">
                        <img src="" alt="">
                        <span>课程榜单</span>
                        <span class="live-head-span-min">以购买、学习相关数据为依据~每日更新</span>
                    </div>
                    <div class="list-content">
                        <img src="https://course.myhope365.com/img/bestseller-list.23c00d98.png" alt="">
                        
                        <div class="rank">
                            <div class="rank-1">
                                <div class="NO" style="background-color: rgb(252, 139, 51);">NO.1</div>
                            <div class="img">
                                <img src="https://oos-hazz.ctyunapi.cn/online-course/%E6%B1%82%E8%81%8C%E6%88%90%E5%8A%9F%E4%B9%8B%E9%81%93%E4%B8%8E%E6%9C%AF_1-1227885610962780160.jpg" alt="">
                            </div>
                            <div>
                                <div class="liveName">求职成功之道与术</div>
                                <div class="price">￥ 800</div>
                                <div class="sign">652 人报名</div>
                            </div>
                            </div>
                            <div class="rank-1">
                                <div class="NO NO-2" style="background-color: rgb(167, 167, 167);">NO.2</div>
                            <div class="img">
                                <img src="https://oos-hazz.ctyunapi.cn/online-course/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1_%E5%AE%A3%E4%BC%A0%E5%9B%BE-1206867183058026496.png" alt="">
                            </div>
                            <div>
                                <div class="liveName">毕设从小白到老司机修成记</div>
                                <div class="price">￥ 1000</div>
                                <div class="sign">632 人报名</div>
                            </div>
                            </div>
                            <div class="rank-1">
                                <div class="NO NO-3" style="background-color: rgb(239, 98, 190);">NO.3</div>
                            <div class="img">
                                <img src="https://oos-hazz.ctyunapi.cn/online-course/hadoopcore%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E5%AE%9E%E6%88%98-1421990960866263040.jpg" alt="">
                            </div>
                            <div>
                                <div class="liveName">hadoopcore从入门到实战-v2021版</div>
                                <div class="price price-3">￥ 1000</div>
                                <div class="sign">130 人报名</div>
                            </div>
                            </div>
                            <button class="change-box">换一换</button>
                         </div>
                         
                         <!-- <div>
                            <div class="NO-3" style="background-color: rgb(252, 139, 51);">NO.1</div>
                            <div class="img">
                                <img src="https://oos-hazz.ctyunapi.cn/online-course/%E6%B1%82%E8%81%8C%E6%88%90%E5%8A%9F%E4%B9%8B%E9%81%93%E4%B8%8E%E6%9C%AF_1-1227885610962780160.jpg" alt="">
                            </div>
                            <div>
                                <div class="liveName">hadoopcore从入门到实战-v2021版</div>
                                <div</div>
                                <div class="price">￥ 1000</div>
                                <div class="sign">130 人报名</div>
                         </div> -->
                         
                        </div>
                    </div>
                </div>
    </div>
</template>
<script>
import Swiper from 'swiper'
import "swiper/css/swiper.min.css"
import { getLoop } from '../api/request'

export default {
    data() {
        return {
            swiperList: []
        }
    },
    created() {

    },
    mounted() {
        getLoop(5).then(res => {
            console.log("swiperList----", res, res.data)
            this.swiperList = res.data

            this.$nextTick(function () {
                new Swiper('.swiper-container', {
                    direction: 'horizontal', // 垂直切换选项
                    loop: true, // 循环模式选项

                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },

                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                })
            })
        })
    }
}
</script>
<style lang="less" scoped>
.swiper-main-box{
    margin: 0 auto;
    min-width: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    /* 盖住head-top-1 */
    position: relative;
    
}
.swiper-container {
    width: 1128px;
    height: 400px;
    margin: 10px auto;
    border-radius: 8px;
}
.swiper-main-box {
    z-index: 990;
}
  .swiper {
    width: 100%;
    height: 100%;
   
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }



/* vip */
    .vip-box{
        margin-top: 22px;
        height: 50px;
        background: url(https://course.myhope365.com/img/vip-line.f590fe35.png);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30px;
        img{
            width: 30px;
            margin-right: 8px;
        }
        span{
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333;
        }
        button{
            margin-left: 3%;
            width: 72px;
            height: 26px;
            background: #6e421a;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23);
            border-radius: 18px;
            border: none;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
        }
    }

/* 直播课程 */
.live-box{
    margin-top: 22px;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    .live-head{
        margin-bottom: 10px;
        img{
            width: 38px;
        
        }
        span{
            font-size: 24px;
            font-weight: 600;
            color: #333;
            padding: 10px;
            text-align: center;
        }
        .live-head-span-min{
            font-size: 14px;
            color: #999;
            margin-left: 15px;
        }
        
    }
    
    .live-left{
        width: 57%;
        background: #fff;
        min-height: 600px;
        border-radius: 20px;
        padding: 30px 20px;
        box-sizing: content-box;
        margin-right: 20px;
        .live-content{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            position: relative;
            height: auto;
            margin-right: 10px;
            margin-left: 10px;
            box-sizing: border-box;
            
        }
        .live-content>div{
            width: 48%;
            border-radius: 10px;
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .15);
            margin-top: 20px;
            cursor: pointer;
            
            .liveName{
                font-size: 17px;
                margin-top: 8px;
                margin-left: 5px;
                font-weight: 600;
            }
            .liveTime{
                font-size: 16px;
                color: #777878;
                margin-top: 3px;
                margin-left: 5px;
            }
        }
       .live-content>div>img{
          width: 100%;
          height:180px;
      }
       
    }
   .list-right{
        display: block;
        width: 41.66666667%;
        background: #fff;
        min-height: 603px;
        border-radius: 20px;
        padding: 30px 20px;
        box-sizing: content-box;
        .list-content{
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-top: 20px;
          height: 540px;
          background: #fff;
          box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);
          border-radius: 20px;
          padding: 20px;
        }
        .list-content>.rank>.rank-1>.NO{
            width: 43px;
            height: 20px;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            background-color: red;
            align-content: center;
            flex-wrap: wrap;
            border-radius: 10px 0 20px 0;
            color: #fff;
            font-size: 12px;
            padding-top: 0;
            z-index: 401;
        }
        .list-content>img{
          margin-top: -40px;
          width: 140px;
          
        }
        .list-content>.rank>.rank-1{
          width: 100%;
          display: flex;
          margin-bottom: 30px;
          cursor: pointer;
          position: relative;
        }
        .list-content>.rank>.rank-1>div{
          overflow: hidden;
          border-radius: 10px;
          margin-right: 12px
        }
        .list-content>.rank>.rank-1>div>img{
          width: 170px;
          height: 110px;
          border-radius: 10px;               
        }
        .liveName{
          font-size: 16px;
          margin-top: 8px;
        }
        .price{
          font-size: 20px;
          font-weight: 600;
          color: #ff0000;
          margin-top: 29px;
        }
        .price-3{
          margin-top: 15px;
        }
        .sign{
          font-size: 14px;
          color: #777878;
          margin-top: 3px;
        }
        .change-box{
          margin-left: 150px;
          margin-top: 20px;
          width: 108px;
          height: 29px;
          background: linear-gradient(90deg, #fd952d, #f1534b);
          border-radius: 15px;
          color: #fff;
          font-weight: 500;
          border: none;
          cursor: pointer;
        }
   }
}
</style>